<template>
  <div>
    <!-- 给组件写了一个props里没定义的属性就叫非props属性 -->
    <base-box class="login-box" style="background-color: #f0f2f5">
      <template #title>
        <!-- <base-title style="color: black">密码登录</base-title> -->
        <base-tabs
          v-model="active"
          :tabs="[
            { value: 'pwd', text: '密码登录' },
            { value: 'phone', text: '手机号注册' },
          ]"
        />
      </template>

      <!-- 默认插槽 -->
      <template>
        <!-- 密码登录div -->
        <div v-if="active == 'pwd'">
          <!-- 账号 -->
          <div class="inp-box">
            <label>用户名：</label>

            <!-- 这是组件 -->
            <!-- <BaseInput :value="user" @input="user = $event"/> -->

            <!-- 
                布尔类型的属性特点：
                  写了就是true
                  没写就是false
               -->
            <BaseInput autofocus placeholder="请输入用户名" v-model="user" />
          </div>
          <!-- 密码 -->
          <div class="inp-box">
            <label>密码：</label>
            <BaseInput placeholder="请输入密码" type="password" v-model="pwd" />
          </div>

          <div class="inp-box">
            <base-check-box v-model="jizhu">记住账号</base-check-box>
            <base-button type="success">登录</base-button>
            <base-button type="danger">注册</base-button>
          </div>
        </div>

        <!-- 手机号注册div -->
        <div v-if="active == 'phone'" style="display:flex;flex-direction:column;align-items:center;">
          <!-- 密码 -->
          <div class="inp-box" style="width:300px;">
            <label>手机号：</label>
            <BaseInput v-model="phone" />
          </div>
          <div style="text-align:right;width:300px;">
            <base-button type="success">注册</base-button>
            <base-button type="danger">返回</base-button>
          </div>
        </div>
      </template>
    </base-box>
  </div>
</template>

<script>
// 导入BaseBox
import BaseBox from "@/components/BaseBox.vue";
// 导入BaseTitle
import BaseTitle from "./components/BaseTitle.vue";
// 导入BaseInput
import BaseInput from "./components/BaseInput.vue";
// 导入BaseCheckbox
import BaseCheckBox from "./components/BaseCheckBox.vue";
// 导入BaseButton
import BaseButton from "@/components/BaseButton.vue";
// 导入BaseTabs
import BaseTabs from "./components/BaseTabs.vue";
export default {
  components: {
    BaseBox,
    BaseTitle,
    BaseInput,
    BaseCheckBox,
    BaseButton,
    BaseTabs,
  },

  data() {
    return {
      // 控制tabs
      active: "pwd",
      phone: '',
      jizhu: true,
      user: "",
      pwd: "",
    };
  },
};
</script>

<style lang="less">
.login-box {
  width: 450px;
  margin: 50px auto;

  .inp-box {
    text-align: center;

    label {
      width: 80px;
      display: inline-block;
      text-align: right;
    }
  }
}
</style>
